<template>
  <div
    @mouseenter="onEnter"
    @mouseleave="onLeave">
    <el-row
      style="padding-top:40px;padding-bottom:40px;border-bottom:1px solid #EEF6F3;"
      :gutter="20">
      <el-col
        style="font-weight:bold;"
        :span="4"
        :offset="1">
        {{userInfoList[infoName].alias}}
      </el-col>
      <el-col :span="16">
        <div v-if="!isEditType">
          {{userInfoList[infoName].value}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <el-button
            type="text"
            icon="edit"
            style="padding-top:0;padding-bottom:0;"
            v-if="isEditButtonShow"
            @click="infoEdit">
            编辑
          </el-button>
        </div>
        <div v-else>
          <div style="padding-bottom:10px;">
            <div v-if="userInfoList[infoName].type === 'date'">
              <el-date-picker
                v-model="editInfo"
                type="date"
                :default-value="userInfoList[infoName].value"
                placeholder="选择日期">
              </el-date-picker>
            </div>
            <div v-else-if="userInfoList[infoName].type === 'radio'">
              <el-select
                v-model="editInfo"
                placeholder="请选择">
                <el-option
                  v-for="item in userInfoList[infoName].list"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
            <div v-else>
              <el-input
                v-model="editInfo"
                placeholder="请输入内容">
              </el-input>
            </div>
          </div>
        <el-button
          type="info"
          @click="infoSubmit">
          确 定
        </el-button>
        <el-button @click="isEditDivShow" >取 消</el-button>
      </div>
    </el-col>
  </el-row>
</div>
</template>
<script>
import { mapState, mapActions } from 'vuex'

export default {
  name: 'base-input',
  props: ['info', 'infoName'],
  data () {
    return {
      editInfo: '',
      isEditButtonShow: false,
      isEditType: false
    }
  },
  computed: mapState({
    userInfoList: state => state.user
  }),
  methods: {
    ...mapActions([
      'editUserInfo'
    ]),
    infoEdit () {
      this.editInfo = this.info.value
      this.isEditDivShow()
    },
    onEnter () {
      this.isEditButtonShow = true
    },
    onLeave () {
      this.isEditButtonShow = false
    },
    infoSubmit () {
      this.editUserInfo({key: this.infoName, value: this.editInfo})
      this.isEditDivShow()
    },
    isEditDivShow () {
      this.isEditType = !this.isEditType
    }
  }
}
</script>